<template>
  <div class="modification">
    <div class="card text-left">
      <div class="card-body">
        <h4 class="card-title">修改个人信息</h4>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
          class="demo-ruleForm myfrom" style="padding-left:50px;padding-right:50px;">
          <el-form-item class="my-el-form-item" label="用户名" prop="username">
            <el-input type="text" clearable v-model="ruleForm.username" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item prop="email" label="email">
            <el-input v-model="ruleForm.email" clearable></el-input>
          </el-form-item>

          <el-form-item prop="phone" label="phone">
            <el-input v-model="ruleForm.phone"></el-input>
          </el-form-item>

          <el-form-item class="d-flex">
            <el-radio v-model="ruleForm.gender" label="男"> 男</el-radio>
            <el-radio v-model="ruleForm.gender" label="女"> 女</el-radio>
          </el-form-item>

          <el-form-item>
            <div class="row d-flex justify-content-center aligin-item-center">
              <div class="col-6 col-lg-3">
                <p class="title">当前头像</p>
                <el-image style="width: 100px; height: 100px;border-radius:50%;object-fit: fill;" :src="avatar">
                </el-image>
              </div>
              <div class="col-6 col-lg-3" v-show="newAvatar">
                <p class="title">新的头像</p>
                <el-image style="width: 100px; height: 100px;border-radius:50%;object-fit: fill;" :src="newAvatar">
                </el-image>
              </div>
            </div>
            <el-button type="text" @click="changeAvatar">更改头像</el-button>
            <el-button v-show="newAvatar" type="text" @click="newAvatar = ''">取消更改</el-button>
          </el-form-item>
          <el-form-item>
            <el-image class="myavater mx-2 my-2" style="width: 100px; height: 100px;" v-for="(item, index) in srcList"
              :key="index" :src="item" @click="changeImg(item)">
            </el-image>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <router-link to="/userInfo" class="btn btn-outline-primary mx-2" style="margin-right:5px;" tag="button">返回
            </router-link>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      newAvatar: "", //新头像
      avatar: this.$store.getters.getUserInfo.avatar,
      ruleForm: {
        id: this.$store.getters.getUserInfo.id,
        username: this.$store.getters.getUserInfo.username,
        email: this.$store.getters.getUserInfo.email,
        phone: this.$store.getters.getUserInfo.phone,
        gender: this.$store.getters.getUserInfo.gender,
      },
      rules: {
        username: [
          { message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { message: "请输入电话号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        email: [
          { message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur",
          },
        ],
      },
      srcList: [
        "http://egg-rbac.oss-cn-hangzhou.aliyuncs.com/1652535442530125.jpg",
        "http://egg-rbac.oss-cn-hangzhou.aliyuncs.com/1652596657946788.jpg",
        "http://egg-rbac.oss-cn-hangzhou.aliyuncs.com/1652603360619109.jpg",
        "http://egg-rbac.oss-cn-hangzhou.aliyuncs.com/1652603349628356.jpg",
        "http://egg-rbac.oss-cn-hangzhou.aliyuncs.com/1652603435723874.jpg",
        "http://egg-rbac.oss-cn-hangzhou.aliyuncs.com/1652955786630576.jpg",
        "http://egg-rbac.oss-cn-hangzhou.aliyuncs.com/1652955964432969.jpg",
        "http://egg-rbac.oss-cn-hangzhou.aliyuncs.com/1652955794629302.jpg",
        "http://egg-rbac.oss-cn-hangzhou.aliyuncs.com/1652603396021262.jpg",
      ],
    };
  },

  methods: {
    getInfo() {
      if (this.newAvatar == "") {
        this.newAvatar = this.avatar;
      }
    },

    refresh() {
      this.reload();
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.getInfo();
          const data = await this.$http.post("/users/Modification", {
            id: this.ruleForm.id,
            username: this.ruleForm.username,
            phone: this.ruleForm.phone,
            email: this.ruleForm.email,
            avatar: this.newAvatar,
            gender: this.ruleForm.gender,
          });
          window.sessionStorage.setItem(
            "usersObj",
            JSON.stringify({
              avatar: this.newAvatar,
              id: this.ruleForm.id,
              last_login: this.$store.getters.getUserInfo.last_login,
              email: this.ruleForm.email,
              phone: this.ruleForm.phone,
              gender: this.ruleForm.gender,
              roles: this.$store.getters.getUserInfo.roles,
              token: this.$store.getters.getUserInfo.token,
              username: this.ruleForm.username,
            })
          );

          if (data.code != 200) {
            this.$refs[formName].resetFields();
            this.$message.error(data.data);
          } else {
            this.$refs[formName].resetFields();
            this.$message.success(data.data);
            this.$router.push("/userInfo");
            location.reload();
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //改变头像
    changeAvatar() {
      this.$prompt("请输入更改头像URL地址(http/https)", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /(http|https):\/\/([\w.]+\/?)\S*/,
        inputErrorMessage: "URL格式不正确",
      })
        .then(({ value }) => {
          this.newAvatar = value;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消更改",
          });
        });
    },
    //选择头像
    changeImg(imgSrc) {
      this.newAvatar = imgSrc;
    },
  },
};
</script>

<style lang="less" scoped>
.modification {
  height: 100vh;
  background: url(https://cdn.syjun.vip/background.png) no-repeat 100% 100%;

  .card {
    background: transparent;
    border: none !important;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.myavater {
  transition: all 0.5s;
}

.myavater:hover {
  transform: scale(1.3);
}

p {
  text-indent: 0 !important;
}
</style>
